<template>
  <grid-layout :layout="layout" class="building-details">
    <template #left>
      <split-title text="基础信息" />
      <descriptions :columns="columns.slice(0, 2)" :data-source="details" :col-span="24" />
      <split-title text="人口信息" />
      <descriptions :columns="columns.slice(2, 6)" :data-source="details" :col-span="24" />
      <split-title text="房屋信息" />
      <descriptions :columns="columns.slice(-2)" :data-source="details" :col-span="24" />
    </template>
    <template #right>
      <building-details-table :data="data" style="height: 100%" />
    </template>
  </grid-layout>
</template>

<script>
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import BuildingDetailsTable from './building-details-table.vue';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';

export default {
  name: 'building-details',
  components: {
    GridLayout,
    SplitTitle,
    BuildingDetailsTable,
  },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      details: {},
      layout: [
        { name: 'left', colSpan: 6, style: { padding: '20px' } },
        { name: 'right', colSpan: 18 },
      ],
      columns: [
        { label: '楼栋名称', key: 'building_full_name' },
        { label: '所属网格', key: 'area_name' },
        { label: '户籍人口数量', key: '户籍' },
        { label: '流动人口数量', key: '流动' },
        { label: '关爱人员数量', key: '关爱人员' },
        { label: '重点人员数量', key: '重点人员' },
        { label: '单元数量', key: 'cell_total' },
        { label: '房屋总数量', key: 'room_num' },
      ],
    };
  },
  created() {
    this.getDetailsData();
    this.getBqTypeCount();
    this.getQhTypeCount();
  },
  methods: {
    async getDetailsData() {
      const params = { building_id: this.data.id };
      const { data = {} } = await this.$axios.get('/xw-microservice/xw-actual-data/v3/house/building/detail', {
        params,
      });
      this.details = Object.assign({}, this.details, data);
    },
    async getBqTypeCount() {
      const params = { building_id: this.data.id };
      const { data = {} } = await this.$axios.get('/xw-microservice/xw-analysis/v3/people_info/getBqTypeCount', {
        params,
      });
      this.details = Object.assign({}, this.details, data);
    },
    async getQhTypeCount() {
      const params = { building_id: this.data.id };
      const { data = {} } = await this.$axios.get('/xw-microservice/xw-analysis/v3/people_info/getQhTypeCount', {
        params,
      });
      this.details = Object.assign({}, this.details, data);
      console.log(this.details);
    },
  },
};
</script>

<style lang="less">
.building-details {
  //width: 1320px;
  ///deep/ .title {
  //  margin: 30px 0 7px;
  //}
  ///deep/ .title:first-child {
  //  margin-top: 0;
  //}
  ///deep/ .panel-row.ant-row-flex {
  //  .ant-col:last-child {
  //    padding: 0;
  //  }
  //}
}
</style>
